<template>
  <div class="container">
    <a-tabs class="setting-tab">
      <a-tab-pane key="role" tab="角色设置">
        <a-button type="primary" style="margin-bottom: 16px" @click="showDialog = true"
          >新增角色</a-button
        >
        <a-table
          :columns="tableColumns"
          :dataSource="roleList"
          :pagination="{
            current: pageParams.page,
            pageSize: pageParams.pagesize,
            total: pageParams.total,
            onChange: changePage
          }"
        >
          <template #bodyCell="{ column, record }">
            <a-space v-if="column.dataIndex === 'operate'">
              <a-button type="primary" @click="getDetail(record.id)">编辑</a-button>
              <a-button type="danger" @click="delRow(record.id)">删除</a-button>
            </a-space>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="setting" tab="公司设置" force-render>
        <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 10 }">
          <a-form-item label="公司名称">
            <a-input disabled :value="companyData.name"></a-input>
          </a-form-item>
          <a-form-item label="公司地址">
            <a-input disabled :value="companyData.companyAddress"></a-input>
          </a-form-item>
          <a-form-item label="公司邮箱">
            <a-input disabled :value="companyData.mailbox"></a-input>
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea disabled :value="companyData.remarks"></a-textarea>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
    <a-modal @cancel="btnCancel" @ok="btnOK" :title="showTitle" v-model:visible="showDialog">
      <a-form :model="formData">
        <a-form-item name="name">
          <a-input v-model:value="formData.name" placeholder="请输入角色名称"></a-input>
        </a-form-item>
        <a-form-item name="description">
          <a-input v-model:value="formData.description" placeholder="请输入角色描述"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { Modal, Form, message } from 'ant-design-vue'
import {
  getRoleList,
  getRoleDetail,
  delRole,
  addRole,
  updateRole,
  getCompanyInfo
} from '@/api/setting.js'
const tableColumns = [
  {
    title: '序号',
    customRender: ({ index }) => {
      return index + 1 + (pageParams.page - 1) * pageParams.pagesize
    }
  },
  { title: '角色名称', dataIndex: 'name' },
  { title: '描述', dataIndex: 'description' },
  { title: '操作', dataIndex: 'operate' }
]
const showDialog = ref(false)
const formData = ref({ name: '', description: '' })
const rules = ref({
  name: [{ required: true, message: '请输入角色名称' }],
  description: [{ required: true, message: '请输入角色描述' }]
})
const form = Form.useForm(formData, rules)
// 声明存储数据
const roleList = ref([])
const companyData = ref({}) // 定义公司数据
// 声明分页数据
const pageParams = reactive({ total: 0, page: 1, pagesize: 5 })

const showTitle = computed(() => {
  return formData.value.id ? '编辑角色' : '新增角色'
})

// 重新获取数据
const fetchRoleList = async () => {
  const { total, rows } = await getRoleList(pageParams)
  pageParams.total = total
  roleList.value = rows
}
const changePage = (page, pagesize) => {
  pageParams.page = page
  pageParams.pagesize = pagesize
  fetchRoleList()
}
const fetchCompany = async () => {
  companyData.value = (await getCompanyInfo())[0]
}
// 删除角色
const delRow = (id) => {
  Modal.confirm({
    content: '确定删除该角色吗',
    onOk: async () => {
      await delRole(id)
      if (roleList.value.length === 1) pageParams.page--
      fetchRoleList()
    }
  })
}
const getDetail = async (detailId) => {
  showDialog.value = true
  formData.value = await getRoleDetail(detailId)
}
onMounted(() => {
  fetchRoleList()
  fetchCompany()
})

const btnOK = async () => {
  try {
    await form.validate()
    formData.value.id ? await updateRole(formData) : await addRole(formData)
    message.success(`${showTitle.value}成功`)
    showDialog.value = false
    formData.value = {
      name: '',
      description: ''
    }
    fetchRoleList()
  } catch (error) {
    console.log(error)
  }
}
const btnCancel = () => {
  showDialog.value = false
  form.resetFields()
  formData.value = {
    name: '',
    description: ''
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 16px;
  .setting-tab {
    background-color: #fff;
    padding: 16px;
    height: calc(100vh - 93px);
  }
}
</style>
